<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>统一身份认证登录 - Oauth2.0</title>
    <link rel="stylesheet" href="../oauth2/css/login.css">
    <script src="../oauth2/js/jquery.min.js"></script>
    <script src="../oauth2/js/jsencrypt.min.js"></script>
    <script src="../oauth2/js/jquery.cookie-1.4.1.min.js"></script>
    <script src="../oauth2/js/layer/layer.js"></script>
    <script src="../oauth2/js/util.js"></script>
</head>
<body>
<div class="login-panel" id="loginPanel">
    <div class="login-title">
        <h1>大树快速开发平台 · 统一认证中心</h1>
    </div>
    <div class="login-form">
        <form id="loginForm">
            <div class="login-form-row">
                <input type="text" id="userName" name="userName" value=""
                       autocomplete="off" placeholder="请输入用户名"/>
            </div>
            <div class="login-form-row">
                <input type="password" id="password" name="password" value=""
                       autocomplete="off" placeholder="请输入密码"/>
            </div>
            <div class="login-form-row">
                <input type="text" id="yzm" name="yzm" autocomplete="off" placeholder="请输入验证码"/>
                <img class="yzmimg" onclick="refreshYzm()"
                     src=""
                     alt="验证码图片"/>
            </div>
            <div class="login-form-row">
                <input type="hidden" id="codeUuid" name="codeUuid" value="true"/>
                <button id="login">登 录</button>
                <div class="error-info"></div>
            </div>
        </form>
    </div>
</div>
<script>
  $(function () {
    // 获取cookie中的token
    checkCookieToken();
    // 验证码
    refreshYzm();
    // 绑定登录按钮
    $("#login").click(function () {
      $(".error-info").html('')
      if ($("#userName").val() === '') {
        $(".error-info").html('用户名不能为空')
        return false;
      }
      if ($("#password").val() === '') {
        $(".error-info").html('密码不能为空')
        return false;
      }
      if ($("#yzm").val() === '') {
        $(".error-info").html('验证码不能为空')
        return false;
      }
      let loginData = {
        // 加密传输设置为true，并对用户名密码加密（不设置或设置false，默认为不加密传输）
        isEncrypt: true,
        userName: encryptRSA($("#userName").val()),
        password: encryptRSA($("#password").val()),
        codeUuid: $("#codeUuid").val(),
        yzm: $("#yzm").val()
      }
      layer.load(1, {shade: [0.25, '#000']});
      $.ajax({
        url: '../login/login',
        type: 'post',
        dataType: 'json',
        contentType: 'application/json',
        data: JSON.stringify(loginData),
        success: function (response) {
          if (response.code === '200') {
            const {data} = response
            setCookieToken(data)
            window.location.href = window.location.href + '&UserJwtToken=' + data.accessToken;
          } else {
            layer.closeAll();
            layer.msg(response.message, {icon: 2, shade: 0.25, shadeClose: true, closeBtn: 2});
            refreshYzm();
          }
        }
      })
      return false;
    })
  })

  function refreshYzm() {
    $.get('../captcha/get', function (response) {
      const {data} = response
      $('.yzmimg').attr('src', data.codeBaseImage);
      $('#codeUuid').val(data.codeUuid);
    })
  }

  $("#userName").blur(() => {
    if ($("#userName").val() === '') {
      $(".error-info").html('用户名不能为空')
    }
  })

  $("#password").blur(() => {
    if ($("#password").val() === '') {
      $(".error-info").html('密码不能为空')
    }
  })

  $("#yzm").blur(() => {
    if ($("#yzm").val() === '') {
      $(".error-info").html('验证码不能为空')
    }
  })
</script>
</body>
</html>